<template>
  <div class="view-container">
    <div class="withdraw-form">
      <el-form label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="我的余额:">
          <div>￥{{form.balance | parsePrice | fixed2}}</div>
        </el-form-item>
        <el-form-item label="提现金额(元):" prop="money">
          <el-input v-model.number="form.money" placeholder="请输入提现金额" style="width: 300px"></el-input>
          <el-tooltip effect="dark" placement="bottom">
            <i class="icon fa fa-question-circle-o" @click.stop.prevent="withdrawRule()"></i>
            <div slot="content">
              <div class="rules-wp">
                <h1>提现规则</h1>
                <section>
                  <p>提现时间：</p>
                  <p>每周一24:00前提交的提现申请周二统一处理，每周一24:00后提交的提现申请下周二统一处理，请您耐心等待。</p>
                </section>
                <section>
                  <p>注意事项：</p>
                  <p>1.提现金额：每笔提现不小于100元，且必须为100的整数倍，<span class="important">每周期累计提现金额小于500元时将不予提现</span>。</p>
                  <p>2.提现款项将在平台开始提现处理后3个工作日左右到账，请您注意查收。</p>
                </section>
              </div>
            </div>
          </el-tooltip>
        </el-form-item>
        <el-form-item style="margin: 20px 0;">
          <el-button type="primary" @click="submit('form')" :loading="sending">确认提现</el-button>
          <el-button @click="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--提现明细-->
    <div class="withdraw-table-wp">
      <header>提现明细</header>

      <table-search-view ref="withdrawTable" :table-items="tableItems" empty-text="暂无提现记录" :search-function="getTableDate">
        <template slot="account" slot-scope="scope">
          <div>{{scope.row.merchantName}}</div>
          <div>{{scope.row.bankCardNumber}}</div>
          <div>{{scope.row.bankTypeStr}} {{scope.row.bankBranch}}</div>
        </template>

        <template slot="action" slot-scope="scope">
          <div v-if="scope.row.status==='waiting'">
            <el-button type="text" @click="cancelBack(scope.row.id)" :loading="cancelLoading">撤回</el-button>
          </div>
        </template>
      </table-search-view>

    </div>
  </div>
</template>

<script>
  import TableSearchView from '@/components/TableSearchView';
  import {getAssets,withdrawCash,cancelWithdraw,getCashRecords} from '@/api/assets';
  import {showMessage} from '@/utils/message';

  export default {
    name: 'assetsWithdraw',
    components:{
      'table-search-view':TableSearchView,
    },
    data()
    {
      const validateMoney = (rule, value, callback) => {
        if (!value || isNaN(value) || parseFloat(value) < 100)
        {
          callback(new Error('每笔提现金额不得小于100元'));
        }
        if(parseFloat(value)%100 !==0)
        {
          callback(new Error('提现金额必须为100元的整数倍'));
        }
        else if(parseFloat(value) > this.form.balance)
        {
          callback(new Error('超过最大可提现额度'));
        }
        else {
          callback();
        }
      };
      return {
        sending:false, //提交按钮不可操作
        cancelLoading:false, //提现按钮不可操作
        form:{
          balance: 0, //我的余额
          money: '', //提现金额
        },
        rules: {
          money: [{validator: validateMoney, trigger: 'blur'}],
        },
        tableItems:[
          {
            label:'提现单号',
            prop:'id',
            width:'120px;',
          },
          {
            label:'提现金额(元)',
            prop:'cashMoney',
            width:'140px;',
            sortable:true,
            formatter:'parsePrice',
          },
          {
            label:'提现状态',
            prop:'statusStr',
            width:'140px;',
            sortable:true,
          },
          {
            label:'申请时间',
            prop:'cashTime',
            width:'160px;',
            formatter:'parseTime',
          },
          {
            type:'scope',
            slot:'account',
            label:'收款账户',
            width:'240px;',
          },
          {
            label:'备注',
            prop:'cancelReason',
            width:'120px;',
          },
          {
            type:'scope',
            slot:'action',
            label:'操作',
          },
        ],
      }
    },
    mounted()
    {
      this.getAssets();
    },
    methods: {
      getAssets() //我的资产
      {
        getAssets().then(resp=>{
          this.form.balance = resp.data.balance;
        }).catch(err=>{

        });
      },
      reset(formName)
      {
        this.$refs[formName].resetFields();
      },
      submit(formName)
      {
        this.$refs[formName].validate(valid =>
        {
          if (valid)
          {
            this.sending = true;
            let data = {
              money:this.form.money*100,
            };

            withdrawCash(data).then(resp=>{
              showMessage({
                title:'提现申请提交成功',
                message: resp.data,
                type:'success',
                duration: 0,
              });

              //重置数据
              this.getAssets();
              this.$refs['withdrawTable'].search();


              setTimeout(()=>{
                this.sending = false;
              },100);

            }).catch(err=>{

              setTimeout(()=>{
                this.sending = false;
              },100);

            });
          } else
          {
            return false;
          }
        });
      },
      withdrawRule()
      {
        this.$router.push({name:'assetsWithdrawRule'});
      },
      getTableDate(data) //获取提现记录
      {
        return getCashRecords(data);
      },
      cancelBack(id) //撤回提现
      {
        this.$confirm('撤回提现申请后，银行将不再处理此条提现申请', '确认撤回?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.cancelLoading = true;

          cancelWithdraw({id:id}).then(resp=>{
            this.$message({
              type: 'success',
              message: resp.data || '撤回申请成功,请耐心等待到账',
            });

            this.cancelLoading = false;
            this.$refs['withdrawTable'].search();

          }).catch(err=>{
            this.$message({
              type: 'error',
              message: err.data || '提现撤回失败',
            });

            this.cancelLoading = false;

          });

        }).catch(() => {
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .withdraw-form {
    .icon
    {
      color: #bfcbd9;
      font-size: 24px;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 5px;
    }
  }

  .withdraw-table-wp
  {
    margin: 30px 0;
    > header
    {
      font-size: 14px;
      color: #475669;
      margin: 40px 0 30px;
      font-weight: bold;
    }
  }

  .rules-wp
  {
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    max-width: 460px;

    h1
    {
      font-size: 16px;
      margin: 5px 0;
    }
    p
    {
      margin: 5px 0;
      .important
      {
        color: #ff0000;
      }
    }
    section
    {
      margin-bottom: 20px;
    }
  }
</style>
